<script setup>
import { ref } from "vue";
import textIcon from "@/assets/img/warranty/text-icon2.png";

let isCollapse = ref(true);
let activeKey = ref(0);
const list = [
    {
        id: 0,
        title: "WHAT IS COVERED AND FOR HOW LONG",
        bgColor: "#989898",
        content: [
            {
                class: "text-black",
                style: {
                    fontSize: "1rem",
                },
                texts: ['This warranty applies to the Mastertrack tires listed below, which are warranted against wear out up to the mileage coverage shown. The actual mileage you get from your tires may vary because of driving habits and road conditions. If one of the tires listed in this warranty wears out before the listed mileage we will adjust the tire on a pro-rata basis. "Wear Out" means that the tire\'s tread has worn evenly down to the tread wear indicators (2/32" of an inch of tread remaining). "Pro-Rata" for this Tread Wear Out Coverage is measured by the odometer readings at the time of the tire\'s purchase, as printed on the original tire sales invoice, and at the time of replacement.'],
            },
            {
                class: "text-red text-f-Montserrat-Bold uppercase",
                style: {
                    fontSize: "1.2rem",
                },
                type: "vhtml",
                texts: "<div class='ignore'>Mastertrack:</div> <div class='ignore'>M-TRACK TOUR – 55K</div> <div class='ignore'>M-TRAC HP – 50K</div> <div class='ignore'>M-TRAC CUV – 55K</div> <div class='ignore'>M-TRAC HT – 55K</div> <div ><span class='ignore'>M-TRAC GT – 50K:</span> <span>35-SERIES AND UP, 22 INCHES AND BELOW</span></div><div class='ignore'>BADLANDS ATX - 50K</div> <div class='ignore'>BADLANDS AT – 50K</div> <div ><span class='ignore'>BADLANDS RT – 45K: </span> <span>EXCLUDES ALL 20” & UP AND 35” & UP</span></div>",
            },
            {
                class: "text-black",
                style: {
                    fontSize: "0.8rem",
                },
                texts: ["The tread life limited warranty only applies to you if you are the Original Purchaser and the tires have been used only on the vehicle on which they were originally installed according to the vehicle manufacturer's recommendations. EV vehicles do NOT qualify for mileage warranty."],
            },
        ],
    },
    {
        id: 1,
        title: "WHAT IS NOT COVERED",
        bgColor: "#989898",
        type: "tips",
        subtitle: "The tread life limited warranty does not apply to the following conditions:",
        texts: [
            "Tires used in commercial applications including but not limited to, police, taxi service, national account, government, and contract sales.",
            "Tires supplied as original equipment.",
            "Tires that are installed on any vehicle other than the vehicle on which they were originally installed.",
            'Ride disturbance/Vibration/Out of Round claims after the first 2/32" tread wear use.',
            "The cost for mounting, balancing, and other associated services along with any local, state, or federal taxes.",
            "Tires that are damaged resulting from road hazards, such as impact damage, cuts, snags, punctures, scuffs, nails, pothole, and chuckholes, etc.",
            "Tires that have not been rotated at least every 5,000-6,000 miles.",
            "Tires in service for more than 60 months (5 years) regardless of mileage.",
            "Tires that are damaged from conditions resulting from improper installation, misapplication, use of an improper rim, improper mounting or demounting, or wheel misalignment.",
            "Tires with irregular/mechanical wear conditions.",
            "Tires damaged from misuse such as under inflation, overloading, over deflection, abuse, excessive speed, accident, failure to follow recommended tire rotation practices or improper tire and vehicle maintenance. ",
        ],
    },
    {
        id: 2,
        title: "OWNER'S OBLIGATIONS",
        bgColor: "#989898",
        content: [
            {
                class: "text-black",
                style: {
                    fontSize: "1rem",
                },
                texts: ["Proper vehicle and tire care is necessary to obtain the expected life of a tire. It is your obligation to properly maintain your tires and the vehicle upon which they are mounted, including: (a) operating your tires at the inflation pressure recommended by the vehicle manufacturer, (b) keeping your tire/wheel assemblies in balance, (c) proper wheel alignment, and (d) periodically rotating your tires: every 5,000-6,000 miles."],
            },
        ],
    },
    {
        id: 3,
        title: "SUBMITTING YOUR CLAIM",
        bgColor: "#989898",
        content: [
            {
                class: "text-red text-f-Montserrat-Bold",
                style: {
                    fontSize: "1rem",
                },
                texts: ["*Please send the required documents to customerservice@unicorntire.com", "*Email Subject: Mastertrack Mileage Warranty - First Name & Last Name."],
            },
            {
                class: "text-black",
                style: {
                    fontSize: "1rem",
                },
                type: "order",
                texts: [
                    {
                        text: "Below is the information that will be required,",
                    },
                    {
                        text: ["1. ", "A copy of the installation receipts.  Must include:"],
                        style: {
                            marginLeft: "0.5rem",
                        },
                    },
                    {
                        text: ["a. ", "Year, Make, and Model of Vehicle"],
                        style: {
                            marginLeft: "1.7rem",
                        },
                    },
                    {
                        text: ["b. ", "Mileage at installation."],
                        style: {
                            marginLeft: "1.7rem",
                        },
                    },
                    {
                        text: ["c. ", "Date of installation."],
                        style: {
                            marginLeft: "1.7rem",
                        },
                    },
                    {
                        text: ["2. ", " A copy of all maintenance receipts. Example, tire rotations, tire balance, wheel alignments, etc. Must include:"],
                        style: {
                            marginLeft: "0.5rem",
                        },
                    },
                    {
                        text: ["a. ", "Year, Make, and Model of Vehicle"],
                        style: {
                            marginLeft: "1.7rem",
                        },
                    },
                    {
                        text: ["b. ", "Date or service."],
                        style: {
                            marginLeft: "1.7rem",
                        },
                    },
                    {
                        text: ["c. ", "Mileage at time of service."],
                        style: {
                            marginLeft: "1.7rem",
                        },
                    },
                    {
                        text: ["3. ", " Pictures of the full DOT."],
                        style: {
                            marginLeft: "0.5rem",
                        },
                    },
                    {
                        text: ["a. ", "One side has a complete DOT with a date and the other side is an incomplete DOT without the date."],
                        style: {
                            marginLeft: "1.7rem",
                        },
                    },
                    {
                        text: ["b. ", "The correct side will have 4 numbers and no letters at the end of it."],
                        style: {
                            marginLeft: "1.7rem",
                        },
                    },
                    {
                        text: ["4. ", "Clear pictures of the full tread width of the tires."],
                        style: {
                            marginLeft: "0.5rem",
                        },
                    },
                    {
                        text: ["5. ", "Clear pictures of the full sidewall of the tires."],
                        style: {
                            marginLeft: "0.5rem",
                        },
                    },
                    {
                        text: ["6. ", "Clear picture of the current odometer reading."],
                        style: {
                            marginLeft: "0.5rem",
                        },
                    },
                ],
            },
            {
                class: "text-black text-f-Montserrat-Bold",
                style: {
                    fontSize: "1rem",
                },

                texts: ["No claim will be recognized without the information listed above and where you, the owner, or your authorized agent presented the tire for adjustment. "],
            },
            {
                class: "text-red text-f-Montserrat-Bold",
                style: {
                    fontSize: "1rem",
                },
                texts: ["Please do not discard tires until you have received notification from Mastertrack Tires regarding the disposition of your claim. "],
            },
        ],
    },
    {
        id: 4,
        title: "CONDITIONS AND EXCLUSIONS",
        bgColor: "#989898",
        content: [
            {
                class: "text-black",
                style: {
                    fontSize: "1rem",
                },
                type: "order",
                texts: [
                    {
                        text: "Any tire, or tube, no matter how well constructed, may fail in service or otherwise become unserviceable due to conditions beyond the control of the manufacturer.  For your safety, please comply with the following:",
                    },
                    {
                        text: ["1.", "Check air pressure monthly to maintain proper inflation."],
                        style: {
                            marginLeft: "0.5rem",
                        },
                    },
                    {
                        text: ["2.", "Never overload your tires."],
                        style: {
                            marginLeft: "0.5rem",
                        },
                    },
                    {
                        text: ["3.", "Avoid damaging objects and road hazards."],
                        style: {
                            marginLeft: "0.5rem",
                        },
                    },
                    {
                        text: ["4.", "Avoid use of worn-out tires (less than 2/32” remaining tread depth)."],
                        style: {
                            marginLeft: "0.5rem",
                        },
                    },
                    {
                        text: ["5.", "Avoid excessive speeds."],
                        style: {
                            marginLeft: "0.5rem",
                        },
                    },
                ],
            },
            {
                class: "text-black text-f-Montserrat-Bold",
                style: {
                    fontSize: "1rem",
                },
                texts: ["This limited warranty is only valid in the United States of America, Puerto Rico, and Canada.", "If you have any questions regarding the information or the details of this policy, please contact us by e-mail at customerservice@unicorntire.com."],
            },
        ],
    },
];
const setActiveKey = (key) => {
    if (activeKey.value == key && isCollapse.value) {
        isCollapse.value = false;
    } else {
        isCollapse.value = true;
        activeKey.value = key;
    }
};
const containsAny = (str, arr) => {
    return arr.some((item) => str.includes(item));
};
if (translate) {
    translate.listener.start();
    translate.execute();
}
</script>
<template>
    <div class="container px-0" style="margin-top: -2rem">
        <img class="img-fluid" :src="textIcon" alt="" />
    </div>

    <div class="container top py-4">
        <div class="row">
            <div class="col-lg-12">
                <div class="text-f-Montserrat-Regular text-black">The limited warranty only applies to a customer if they are the Original Purchaser on or after March 1st, 2024, and the tires have been used only on the vehicle on which they were originally installed according to the vehicle manufacturer's recommendations. This warranty is nontransferable.</div>
            </div>
        </div>
    </div>
    <div class="container container-box py-4 mt-4" style="user-select: none">
        <div v-for="(item, index) in list" :key="index">
            <div class="d-flex align-items-center mt-4">
                <svg width="30" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <polygon points="0,0 0,20 15,10" :fill="activeKey == index && isCollapse ? '#ed1c24' : '#00000000'" fill-rule="evenodd" />
                </svg>
                <div class="box-item text-center text-f-ERASBD show-pointer fs-3" :style="`background:${activeKey == index && isCollapse ? '#ed1c24' : item.bgColor}`" @click="setActiveKey(index)">
                    {{ item.title }}
                </div>
                <svg width="30" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <polygon points="30,0 30,20 15,10" :fill="activeKey == index && isCollapse ? '#ed1c24' : '#00000000'" fill-rule="evenodd" />
                </svg>
            </div>
            <div class="content" v-if="activeKey == index && isCollapse">
                <div v-if="item.type == 'tips'" class="text-black text-f-Montserrat-Regular">
                    <div class="mb-2">{{ item.subtitle }}</div>
                    <div v-for="(text, index) in item.texts" :key="index" class="mb-2 d-flex">
                        <div class="text-red me-2" style="font-size: 2rem; line-height: 1rem">•</div>
                        <div>{{ text }}</div>
                    </div>
                </div>
                <div v-else>
                    <div v-for="(child, index) in item.content" :key="index" class="text-f-Montserrat-Regular mb-2">
                        <div v-if="child.type == 'order'">
                            <div v-for="(text, index) in child.texts" :key="index">
                                <div v-if="Array.isArray(text.text)" class="d-flex" :class="child.class" :style="child.style">
                                    <div v-for="(items, index) in text.text" :style="index == 0 ? text.style : 'margin-left:0.5rem'">{{ items }}</div>
                                </div>
                                <div v-else :class="child.class" :style="child.style">
                                    {{ text.text }}
                                </div>
                            </div>
                        </div>
                        <div v-else-if="Array.isArray(child.texts)">
                            <div v-for="(text, index) in child.texts" :key="index">
                                <div :class="child.class" v-html="text" :style="child.style"></div>
                            </div>
                        </div>
                        <div v-else>
                            <div :class="child.class" v-html="child.texts" :style="child.style"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.top {
    background: #efefef;
    border-radius: 1rem;
}
.line {
    width: 5.5rem;
    height: 0.21rem;
    background: #181818;
}
.triangle {
    color: red;
    font-size: 1.3rem;
}
.triangle.left {
    transform: rotate(-90deg);
}
.triangle.right {
    transform: rotate(90deg);
}
.box-item {
    width: calc(100% - 60px);
    height: 4.2rem;
    line-height: 2.2rem;
    vertical-align: middle;
    border-radius: 2.1rem;
    color: #fff;
    display: grid; /* 使用 CSS Grid */
    place-items: center; /* 水平垂直居中 */
}
.content {
    background: #fff;
    border-radius: 1rem;
    padding: 1rem 2rem;
    width: calc(100% - 60px);
    margin-left: 30px;
}
.divider {
    border-bottom: 2px #181818 solid;
}
@media (max-width: 991.98px) {
    .box-item {
        font-size: 1rem !important;
        line-height: 1.1rem !important;
        height: 4.2rem;
        border-radius: 1rem;
        padding: 0 1rem;
    }
    .container.container-box {
        padding: 0 !important;
    }
    .content {
        padding: 0.5rem 0.5rem;
    }
}
</style>
